 .nav-bar{
            position:fixed;
            left:0;
            bottom: 0;
            width: 100%;
            height: 50px;
        }

        .nav-bar>ul{
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            display: -webkit-box;
            background: #fff;
        }


        .nav-bar>ul:before{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #d9d9d9;
            -webkit-transform-origin:  0 100%; 
            transform-origin:0 100%; 
            -webkit-transform: scaleY(.5); 
            transform: scaleY(.5);
        }

        .nav-bar>ul>li{
            position: relative;
            display: block;
            width: 33.33333%;
            flex:1;
            -webkit-box-flex: 1;
        }

        .nav-bar>ul>li:after{
             position: absolute;
            content: '';
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            border-right: 1px solid #d9d9d9;
            -webkit-transform-origin:100% 0; 
            transform-origin:100% 0; 
            -webkit-transform: scaleX(.5); 
            transform: scaleX(.5);
        }
        }
        .nav-bar>ul>li:last-child:after{
            display: none;
        }
        .nav-bar>ul>li>a{
            display: block;
            width: 100%;
            height: 100%;
            line-height: 50px;
            color: #000;
            font-size: 16px;
            text-align: center;
        }